<template>
	<view>
		<van-popup :show="visible" class="erweima-con"
			custom-style="width: 590rpx; height: 680rpx; padding: 85rpx 35rpx 21rpx; border-radius: 8rpx;"
			@click-overlay="hide">
			<div class="content">
				<view class="mb20">微信二维码</view>
				<view class="erweima-img mb20">
					<ljs-dragImages v-model="qr_code" :colCount="1" :count="1" :imgHeight="300" @uploadFile="upload">
					</ljs-dragImages>
				</view>
				<slot></slot>
				<view @click="submit" class="submit-btn">确定</view>
			</div>
		</van-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				userInfo: this.$getStorage('userInfo'),
				qr_code: []
			}
		},
		mounted() {
			if(this.userInfo.qr_code_url) {
				this.qr_code = [{
					url: this.userInfo.qr_code_url,
					image_path: this.userInfo.qr_code,
				}]
			}
		
		},
		methods: {
			show() {
				this.visible = true;
			},
			hide() {
				this.visible = false;
			},
			upload(files) {
				uni.showLoading({
					title: '上传中',
					mask: true // 显示透明遮罩
				});
				const fileUrl = this.qr_code[0].url;
				const data = [{
						name: 'file',
						url: fileUrl
					},
					{
						type: 'qr_code'
					}
				];
				this.$uploadFile(...data).then(res => {
					this.qr_code[0].image_path = res.filepath;
					uni.hideLoading();
				})

			},
			submit() {
				if (!this.qr_code[0]?.image_path) {
					this.$toast('请上传微信二维码');
					return;
				}
				let data = {
					qr_code: this.qr_code[0]?.image_path || ''
				}
				this.$http.editUserInfo(data).then(res => {
					this.$toast('修改成功');
					this.hide();
					this.$emit('updateQrcode', this.qr_code[0].image_path)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.erweima-con {
		display: flex;
		justify-content: center;

		.content {
			text-align: center;
			font-size: 27rpx;
			// color: #C7B6A1;
		}

		.erweima-img {
			width: 300rpx;
			height: 300rpx;
			margin: 0 auto 20rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.submit-btn {
			width: 380rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: #FCE353;
			border-radius: 56rpx;
			font-size: 25rpx;
			color: #222;
			text-align: center;
			margin: 40rpx auto 20rpx;
		}
	}
</style>